<template>
  <div class="banner-wrapper">
    <div class="active-box" v-if="activeRef">
      <img :src="activeRef.icon" width="44" />
      <p class="weatherDesc">{{ activeRef.weatherDay }}</p>
      <p class="weatherVal">
        {{ activeRef.tempLow }}/{{ activeRef.tempHigh }}°
      </p>
      <p class="weatherOther">
        {{ activeRef.windDirDay }}:{{ activeRef.windLevelDay }}级
      </p>
    </div>
    <div class="navigation-point">
      <Carousel :items-to-show="itemsToShowRef" :transition="500" v-model="currentSlideRef">
      <Slide v-for="(item, index) in listComputed" :key="index">
        <div class="carousel__item" @click="handleSlice(item, index)">
          <p :class="`week  ${currentSlideRef === index ? 'active' : ''}`">
            {{ item.week }}
          </p>
          <p :class="`day ${currentSlideRef === index ? 'active' : ''}`">
            {{ item.date }}
          </p>
          <p>
            <img :src="item.icon" width="28" />
          </p>
        </div>
      </Slide>
    </Carousel>
    </div>
  </div>
</template>
<script setup name="Banner">
import { ref, defineProps, computed ,onMounted,onUnmounted} from 'vue';
import { Carousel, Navigation, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import { cloneDeep } from 'lodash'
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zh-cn');

const props = defineProps({
  source: {
    type: Array,
    default: () => [],
  },
});

const listComputed = computed(() => {
  // 创建一个新的Date对象，默认为当前日期和时间
  const timestamp = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000);
  return cloneDeep(props.source).splice(0, 15).map((item, index) => {
    const date = item.predictDate * 1000;
    let week = moment(date).format('dddd');
    if (timestamp === item.predictDate) {
      currentSlideRef.value = index;
      activeRef.value = item;
      week = '今天'
    } else if (item.predictDate < timestamp) {
      week = '昨天'
    } else if (item.predictDate > timestamp && item.predictDate - timestamp === 60 * 60 * 24) {
      week = '明天'
    }
    return {
      ...item,
      week: week,
    };
  });
});

const activeRef = ref();
const currentSlideRef = ref(0);
const itemsToShowRef = ref(15);
const logRef=ref('')

const handleSlice = (item, index) => {
  currentSlideRef.value = index;
  activeRef.value = item;
};

const sizeUpdate = (e) => {
  logRef.value = JSON.stringify(document.body.offsetWidth);
  const bodyOffsetWidth = document.body.offsetWidth;
  if (bodyOffsetWidth <= 740) {
    itemsToShowRef.value = 12;
  }
  if (bodyOffsetWidth <= 620) {
    itemsToShowRef.value = 8;
  }
  if (bodyOffsetWidth > 740) {
    itemsToShowRef.value = 15;
  }
}

onMounted(() => {
  window.addEventListener('resize',sizeUpdate);
})
onUnmounted(() => {
  window.removeEventListener('resize',sizeUpdate);
})
</script>
<style scoped lang="less">
.banner-wrapper {
  width: 100%;
  .active-box {
    text-align: center;
    padding-top: 40px;
    img{
      filter: drop-shadow(0px 0px 3px #888);
    }
    p {
      padding: 0;
      margin: 2px 0;
      color: #fff;
      text-shadow: 0 0 6px #888;
    }
    .weatherDesc {
      font-size: 22px;
      padding-bottom: 2px;
      font-weight: 500;
    }
    .weatherVal {
      font-size: 56px;
      font-weight: 500;
      letter-spacing: 4px;
      padding-bottom: 8px;
    }
    .weatherOther {
      font-size: 18px;
      padding-bottom: 40px;
    }
  }
  .navigation-point{
      border-radius: 25px;
    backdrop-filter: blur(8px);
    background-color: rgba(255,255,255,.5);
    padding: 0 20px;
    max-width: 900px;
    min-width: auto;
    margin: 0 auto;
    box-sizing: border-box;
    .carousel__item {
      width: 100%;
      cursor: pointer;
      font-size: 13px;
      p {
        margin: 2px 0;
        padding: 0;
        color: #333;
        filter: brightness(0.96);
      }
      .active {
        font-weight: bold;
        filter: brightness(1.01);
        font-size:14px;
      }
    }
  }
}
</style>
